<template>
  <van-button
    icon="good-job"
    type="default"
    v-if="is_liked === 1"
    :loading="isLoading"
    class="likeing"
    @click="quitlikeing"
  />
  <span v-else-if="is_liked === -1"
    ><van-button
      icon="good-job-o"
      type="default"
      :loading="isLoading"
      class="good-btn"
      @click="goLikeing"
    />
    <van-button
      icon="good-job-o"
      type="default"
      :loading="isLoading"
      class="notGood"
      @click="goDisLikeing"
    />
  </span>

  <van-button
    icon="good-job"
    type="default"
    v-else
    :loading="isLoading"
    class="notGood"
    @click="quitDislikeing"
  />
</template>

<script>
// 导入收藏文章api和取消收藏文章api
import { isLiking, noLiking, isDisLiking, noDisLiking } from '@/assets/api/article'
// 导入vuex.state
import { mapState } from 'vuex'
export default {
  name: 'btn-likings',
  data() {
    return {
      isLoading: false
    }
  },
  props: {
    is_liked: {
      type: [Number, Object],
      required: true
    },
    art_id: {
      type: [Number, Object, String],
      required: true
    }
  },
  methods: {
    async goLikeing() {
      // 判断是否登入
      if (!this.user) {
        return this.$toast('请登入')
      }
      try {
        // 发起请求,加载状态开启
        this.isLoading = true
        var { data: res } = await isLiking(this.art_id)
      } catch (err) {
        // 请求失败处理
        return this.$toast('点赞失败请稍后重试')
      }
      // 请求成功，更改收藏状态
      this.$emit('toLiking')
      // 关闭加载中
      this.isLoading = false
    },
    async quitlikeing() {
      // 判断是否登入
      if (!this.user) {
        return this.$toast('请登入')
      }
      try {
        // 发起请求,加载状态开启
        this.isLoading = true
        var { data: res } = await noLiking(this.art_id)
      } catch (err) {
        // 请求失败处理
        this.isLoading = false
        return this.$toast('取消点赞失败请稍后重试')
      }
      // 请求成功，更改收藏状态
      this.$emit('quitLiking')
      // 关闭加载中
      this.isLoading = false
    },
    async goDisLikeing() {
      // 判断是否登入
      if (!this.user) {
        return this.$toast('请登入')
      }
      try {
        // 发起请求,加载状态开启
        this.isLoading = true
        var { data: res } = await isDisLiking(this.art_id)
      } catch (err) {
        // 请求失败处理
        return this.$toast('不喜欢失败请稍后重试')
      }
      // 请求成功，更改收藏状态
      this.$emit('toDisLiking')
      // 关闭加载中
      this.isLoading = false
    },
    async quitDislikeing() {
      // 判断是否登入
      if (!this.user) {
        return this.$toast('请登入')
      }
      try {
        // 发起请求,加载状态开启
        this.isLoading = true
        var { data: res } = await noDisLiking(this.art_id)
      } catch (err) {
        // 请求失败处理
        this.isLoading = false
        return this.$toast('取消不喜欢失败请稍后重试')
      }
      // 请求成功，更改收藏状态
      this.$emit('quitLiking')
      // 关闭加载中
      this.isLoading = false
    }
  },
  computed: {
    ...mapState(['user'])
  }
}
</script>

<style lang="less" scoped>
.likeing {
  .van-icon {
    color: #ffa000;
  }
}
.notGood {
  .van-icon {
    transform: rotate(180deg);
    color: rgb(255, 0, 0);
  }
}

.good-btn {
  margin-right: 10px !important;
}
</style>
